// Structure
.jetpack-new-site {
	max-width: 960px;
	margin: 35px auto 0;
	text-align: center;
}

.jetpack-new-site__header {
	margin-bottom: 3em;

	@include breakpoint( '<660px' ) {
		margin: 0 2em 2em;
	}
}

.jetpack-new-site__header-title {
	margin-bottom: 0.35em;
	font-size: 34px;
	font-weight: 300;
	color: var( --color-neutral-70 );
}

.jetpack-new-site__header-text {
	font-size: 16px;
	color: var( --color-neutral-light );
}

.jetpack-new-site__content {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding-bottom: 2em;
}

.jetpack-new-site__wpcom-site,
.jetpack-new-site__jetpack-site {
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 360px;
	margin: 0;

	@include breakpoint( '<660px' ) {
		display: none;
	}
}

.jetpack-new-site__wpcom-site .wordpress-logo,
.jetpack-new-site__jetpack-site .jetpack-logo {
	flex: 1;
	max-width: 72px;
	max-height: 72px;
	margin: 1.5em auto;
	transition: 0.25s transform ease;
}

.jetpack-new-site__wpcom-site .wordpress-logo {
	fill: var( --color-wordpress-com );
}

.jetpack-new-site__jetpack-site .jetpack-logo {
	fill: var( --color-jetpack );
}

.jetpack-new-site__card-title {
	margin-bottom: 0.75em;
	font-size: 24px;
	line-height: 1.25em;
}

.jetpack-new-site__card-description {
	margin-bottom: 1em;
	color: var( --color-neutral-40 );
}

.jetpack-new-site__button-holder {
	display: flex;
	flex: 1;
	align-self: flex-end;
	width: 100%;
}

.jetpack-new-site__wpcom-site {
	.button {
		align-self: flex-end;
		width: 100%;
		margin-top: 16px;
	}
}

.jetpack-new-site__jetpack-site,
.jetpack-new-site__mobile-jetpack-site {
	.jetpack-connect__connect-button-card {
		background: transparent;
	}

	.jetpack-connect__site-address-container {
		position: relative;

		.gridicon {
			position: absolute;
			top: 8px;
			left: 8px;
			color: var( --color-neutral-10 );
		}

		.form-text-input {
			padding-left: 40px;
		}

		.spinner {
			position: absolute;
			right: 8px;
			top: 10px;
		}
	}

	label {
		display: none;
	}

	input[type='text'] {
		&:focus {
			border-color: var( --studio-jetpack-green-30 );
			box-shadow: 0 0 0 2px var( --studio-jetpack-green-20 );
		}
	}

	.button {
		background-color: var( --studio-jetpack-green-50 );
		border-color: var( --studio-jetpack-green-70 );
		margin-top: 16px;
		width: 100%;

		&:hover,
		&:focus {
			background-color: var( --studio-jetpack-green-60 );
		}

		.accessible-focus &:focus {
			box-shadow: 0 0 0 2px var( --studio-jetpack-green-30 );
		}

		&[disabled],
		&:disabled {
			background-color: var( --color-surface );
			border-color: var( --color-neutral-5 );
			color: var( --color-neutral-5 );
		}
	}
}

.jetpack-new-site__mobile {
	display: none;
	width: 100%;
	padding: 36px;

	@include breakpoint( '<660px' ) {
		display: block;
	}
}

.jetpack-new-site__mobile-wpcom-site {
	.button {
		width: 100%;
	}
}

.jetpack-new-site__mobile-jetpack-site {
	.jetpack-connect__connect-button-card {
		margin: 16px 0 0;
		padding: 0;
		border: none;
	}
}

.jetpack-new-site__divider {
	display: none;
	position: relative;
	margin: 32px 0;

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 1px;
		background: rgba( var( --color-neutral-10-rgb ), 0.5 );
	}

	span {
		position: relative;
		z-index: 2;
		padding: 8px;
		color: var( --color-neutral-light );
		background: var( --color-surface );
	}

	@include breakpoint( '<660px' ) {
		display: block;
	}
}
